<template>
  <el-dialog
    v-el-drag-dialog
    :title="'商品模式新增调价'"
    :visible.sync="visible"
    width="1440px"
    @closed="reset"
  >
    <el-form
      ref="dataForm"
      class="form1"
      :model="shop"
      inline
    >
      <el-form-item label="商品分类:" prop="orgSNNo">
        <el-tree-select
          v-model="shop.gtId"
          :clearable="false"
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择',
            loading: $loadingPlugin.getTreeData,
          }"
          :tree-params="{
            'expand-on-click-node': false,
            'highlight-current': true,
            props: {
              value: 'gtId',
              label: 'gtName',
              disabled: 'disabled',
            },
            data: goodsTreeData,
          }"
          @node-click="selectTreeChange"
        />
      </el-form-item>
      <el-form-item label="商品名称:">
        <el-select v-model="shop.goodsId" filterable clearable>
          <el-option
            v-for="(l, i) in goodsTypesDetailList"
            :key="i"
            :value="l.goodsId"
            :label="l.goodsName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="生效机构:" prop="orgSNNo">
        <el-tree-select
          v-model="shop.orgSNNo"
          clearable
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择',
            loading: $loadingPlugin.getTreeData,
          }"
          :tree-params="{
            'expand-on-click-node': false,
            'highlight-current': true,
            props: {
              value: 'orgSNNo',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: orgTreeData,
          }"
          @node-click="selectOrgTreeChange1"
        />
      </el-form-item>
      <el-form-item label="波动方式:">
        <el-select v-model="shop.priceType" filterable clearable style="width: 100px;">
          <el-option
            v-for="(l, i) in priceTypeMap"
            :key="i"
            :value="l.value"
            :label="l.desc"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="波动价格:">
        <el-input-number v-model="shop.price" :controls="false" :min="0" :max="99999" :precision="2" placeholder="请输入" style="width: 100px;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="page_main">
      <div class="left" :class="{ width100: fold }">
        <div class="info-title">
          <span class="title-icon" />
          <span>商品现有报价客户</span>
        </div>
        <lb-table
          ref="lbTable_left"
          v-loading="$loadingPlugin.fetchData"
          border
          element-loading-text="加载中"
          :column="tableDataLeft.column"
          :data="tableDataLeft.data"
          highlight-current-row
          :total="tableDataLeft.total"
          :immediate-fetch="false"
          pagination
          height="500"
          @current-change="selectLeftTable"
          @fetch="fetchDataLeft"
        />
      </div>
      <div v-show="fold" class="fold-div">
        <i class="el-icon-d-arrow-left" @click="toggleFold" />
      </div>
      <div v-show="!fold" class="right">
        <div class="info-title flex">
          <div class="title-wrapper">
            <span class="title-icon" />
            <span>客户信息</span>
          </div>
          <i class="el-icon-d-arrow-right" @click="toggleFold" />
        </div>
        <div class="border">
          <p class="dangerColor" style="margin-bottom: 5px;" v-html="tip1" />
          <p style="margin-bottom: 5px;">添加客户</p>
          <el-form class="form">
            <el-form-item label-width="0" prop="csmPhone" class="block">
              <el-input v-model.trim="csmInfo.text" style="width: 400px;" placeholder="请输入">
                <el-select
                  slot="prepend"
                  v-model="csmInfo.type"
                  size="mini"
                  style="width: 100px;"
                  placeholder="请选择"
                >
                  <!-- <el-option label="客户电话" :value="'csmRgPhone'" /> -->
                  <el-option label="身份证号" :value="'sfzh'" />
                  <el-option label="客户编号" :value="'csmCode'" />
                </el-select>
                <el-button
                  slot="append"
                  size="mini"
                  class="append-search"
                  @click="searchCms"
                >查询</el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="客户编号:">{{ csmInfo.csmCode }}</el-form-item>
            <el-form-item label="客户名称:">{{ csmInfo.csmName }}</el-form-item>
            <el-form-item label="客户电话:">
              <el-select
                v-model="csmInfo.csmRgPhone"
                style="width: 135px;"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="(l, i) in csmInfo.phoneItems"
                  :key="i"
                  :label="l.csmPhone"
                  :value="l.csmPhone"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="客户类型:">{{ formatColumnMap(customerTypeMap, 'value', csmInfo.csmType, 'desc') }}</el-form-item>
            <el-form-item label="所属机构:">{{ csmInfo.nearStationName }}</el-form-item>
            <el-form-item label="客户地址:" class="block">
              <el-select
                v-model="csmInfo.csmRgAddress"
                size="mini"
                style="width: 300px;"
                placeholder="请选择"
              >
                <el-option
                  v-for="(l, i) in csmInfo['addressItems']"
                  :key="i"
                  :label="l.csmAddress"
                  :value="l.csmAddress"
                />
              </el-select>
              <el-button size="mini" type="primary" style="margin-left: 10px;" @click="addUser">确认添加</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="border" style="width: 100%; margin-top: 10px;">
          <p style="margin-bottom: 5px;">客户列表</p>
          <lb-table
            ref="tableData_right"
            v-loading="$loadingPlugin.fetchData"
            border
            stripe
            element-loading-text="加载中"
            :column="tableDataRight.column"
            :data="tableDataRight.data"
            highlight-current-row
            :total="tableDataRight.total"
            custom-column
            height="200"
            @selection-change="selectRightTable"
          />
          <p class="dangerColor" style="margin-bottom: 5px;" v-html="tip2" />
          <el-form label-width="90px;" style="margin-top: 10px;">
            <el-form-item
              label-width="90px"
              style="width: 100%;"
              label="时效范围:"
              class="merge-item"
            >
              <el-date-picker
                v-model="submit.date"
                style="width: 100%;"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item
              label-width="90px"
              style="width: 100%;"
              label="生效机构:"
              prop="orgSNNo"
            >
              <el-tree-select
                v-model="submit.orgSNNo"
                :clearable="false"
                class="tree-select"
                :popover-width="360"
                :select-params="{
                  clearable: true,
                  placeholder: '请选择组织机构',
                  loading: $loadingPlugin.getTreeData,
                }"
                :tree-params="{
                  'expand-on-click-node': false,
                  'highlight-current': true,
                  props: {
                    value: 'orgSNNo',
                    label: 'orgName',
                    disabled: 'disabled',
                  },
                  data: orgTreeData,
                }"
                @node-click="selectOrgTreeChange"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 关闭 </el-button>
      <el-button
        :loading="$loadingPlugin.add || $loadingPlugin.edit"
        type="primary"
        @click="success"
      >
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { formatFixed2, parseTime } from '@/utils'
  import {
    goodsTypeDetail,
    CmsSpecialPriInfo,
    CmsSpecialDeleteGoods,
    CmsSpecialSearchCsmInfo,
    CmsSpecialconfigSave, queryMap
  } from '@/api'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import { formatColumnMap } from '@/utils'
  import { mapGetters } from 'vuex'
  import { keepDotLength } from '@/utils/math'

  export default {
    name: 'addSelectPrice',
    props: ['orgTreeData', 'goodsTreeData'],
    data() {
      return {
        formatColumnMap,
        visible: false,
        fold: false,
        goodsTypesDetailList: [],
        customerTypeMap: [],
        customTypeBean: {},
        disAbledStatu: true,
        selectOrgValue: {}, // 生效机构
        csmInfo: {
          text: '',
          type: 'sfzh',
          phoneItems: [],
          addressItems: [],
          csmRgPhone: '',
          csmRgAddress: ''
        },
        tip1: '',
        tip2: '',
        shop: {},
        submit: {
          date: [],
          orgSNNo: null
        },
        priceTypeMap: [
          { value: 1, desc: '下浮', key: 'Fluctuating' },
          { value: 2, desc: '固定', key: 'Fixed' }
        ],

        tableDataLeft: {
          data: [],
          column: [
            {
              label: '状态',
              prop: 'checkStatus',
              align: 'center',
              render: (h, { row, column }) => <span>{this.statusMap(row, column)}</span>
            },
            {
              label: '时效范围',
              prop: 'startDt',
              width: 200,
              align: 'center',
              render: (h, { row, column }) => <span>{this.timeformat(row, column)}</span>
            },
            {
              label: '波动方式',
              prop: 'priceType',
              width: 80,
              align: 'center',
              render: (h, { row }) => (
              <span>
                {row.priceType &&
                  this.priceTypeMap.find((l) => l.value === row.priceType).desc}
              </span>
            )
            },
            { label: '波动价格', prop: 'price', align: 'right', formatter: row => formatFixed2(row.price) },
            { label: '客户名称', prop: 'csmName', align: 'center' },
            { label: '客户编号', prop: 'csmCode', align: 'center' },
            { label: '客户电话', prop: 'contactPhone', width: 110, align: 'center' },
            { label: '客户地址', prop: 'csmAddress', width: 180, align: 'center' },
            { label: '生效机构', prop: 'scopeOrgName', width: 180, align: 'center' },
            {
              label: '操作',
              prop: 'op',
              width: 50,
              align: 'center',
              render: (h, { row, column, $index }) => (
              <el-link
                underline={false}
                onClick={() => {
                  this.delShop(row, $index)
                }}
                type='danger'
              >
                删除
              </el-link>
            )
            }
          ]
        },
        tableDataRight: {
          total: 0,
          column: [
            {
              type: 'selection'
            },
            {
              label: '操作',
              prop: 'op',
              width: 50,
              align: 'center',
              render: (h, { row, column, $index }) => (
              <el-link
                underline={false}
                onClick={() => {
                  this.delCms(row, $index)
                }}
                type='danger'
              >
                删除
              </el-link>
            )
            },
            { label: '客户编号', prop: 'csmCode' },
            { label: '客户名称', prop: 'csmName' },
            {
              prop: 'csmType',
              label: '客户类型',
              render: (h, { row }) => <span>{ row.csmType && formatColumnMap(this.customerTypeMap, 'value', row.csmType, 'desc') }</span>
            },
            { label: '电话', prop: 'csmRgPhone', width: 110 },
            { label: '所属机构', prop: 'csmOrg', width: 150 },
            { label: '地址', prop: 'csmRgAddress', width: 150 }
          ],
          data: []
        },
        isClickLeftSelect: false
      }
    },
    computed: {
      ...mapGetters(['orgList'])
    },
    created() {
      this.queryOptionsMap()
    },
    methods: {
      async search() {
        this.fetchDataLeft({})
      },
      verifyLfetQueryParams() {
        // 校验商品分类
        if (!this.shop.gtId) {
          this.$message.error('请选择商品分类')
          return false
        }

        // 校验商品名称
        if (!this.shop.goodsId) {
          this.$message.error('请选择商品名称')
          return false
        }

        // 校验波动方式
        if (!this.shop.priceType) {
          this.$message.error('请选择波动方式')
          return false
        }

        // 校验价格
        var price = this.shop.price
        if (!price) {
          this.$message.error('请输入波动价格')
          return false
        } else {
          var reg = /^-?\d+(,\d{3})*(\.\d{1,2})?$/
          if (reg.test(price) && price > 0) {
            11
          } else {
            this.$message.error('波动价格输入有误，请重新输入')
            return false
          }
        }

        return true
      },

      // 查询客户信息
      async fetchDataLeft({ pageIndex = 1, pageSize = 0 }, data) {
        if (JSON.stringify(this.shop) === '{}') {
          return
        }
        const verify = this.verifyLfetQueryParams()
        if (!verify) return
        const params = {
          ...this.shop,
          pageIndex,
          pageSize
        }
        const res = await CmsSpecialPriInfo(params)
        this.tableDataLeft.data = res.data.rows
        this.tableDataLeft.total = res.data.total
        this.isClickLeftSelect = true
        const org = this.orgList.find(item => item.orgSNNo === this.shop.orgSNNo)
        const goods = this.goodsTypesDetailList.find(it => it.goodsId === this.shop.goodsId)
        this.tip1 = '已选择' + '"' + goods.goodsName + '"' +
          '商品，所属机构' + '"' + org.orgName + '"' +
          '，波动方式' + '"' + this.priceTypeMap.find((l) => l.value === this.shop.priceType).desc + '"' +
          '，波动价格' + '"' + keepDotLength(this.shop.price, 2) + '"'
        this.initTip2()
      },
      initTip2() {
        if (this.tip2 === '') {
          // 初始化客户类型数组
          for (const key in this.customerTypeMap) {
            const value = this.customerTypeMap[key]
            const customerTypeInfo = {
              number: 0,
              name: value,
              type: key
            }
            this.customTypeBean[key] = customerTypeInfo
          }
          const totalNumber = 0
          let text = '已选中' + totalNumber + '个客户'
          for (const key in this.customTypeBean) {
            const obj = this.customTypeBean[key]
            obj.number = 0
            text = text + '，' + obj.number + '个' + obj.name.desc
          }
          this.tip2 = text
        }
      },
      selectLeftTable(val) {
      // console.log(val, 'val')
      // const params = { 'goodsId': val.goodsId, 'priceType': val.priceType, 'price': val.price, 'scopeOrgSNNo': val.orgSNNo }
      // if (this.disAbledStatu) params['expired'] = 2
      // this.fetchDataRight({}, params)
      },
      // 选择商品分类
      selectTreeChange(value) {
        // this.orgSNNo = value.orgSNNo
        this.getGoodsTypeDetails(value.gtId)
      },
      // 选择生效机构
      selectOrgTreeChange(value) {
        this.selectOrgValue = { ...value }
      // this.orgSNNo = value.orgSNNo
      },
      selectOrgTreeChange1(value) {
      // this.selectOrgValue = { ...value }
      // this.orgSNNo = value.orgSNNo
      },
      // 获取商品分类详情
      async getGoodsTypeDetails(val) {
        try {
          const res = await goodsTypeDetail({ gtId: val })
          this.goodsTypesDetailList = res.data.rows
        } catch (error) {
          console.log(error)
        }
      },
      // 状态文本格式化
      statusMap(row, column) {
        if (row.endDt < row.nowDt) {
          return '已失效'
        }
        const val = row[column.property]
        if (val === 0) {
          return '一级待审'
        } else if (val === 1) {
          return '二级待审'
        } else if (val === 2) {
          return '已生效'
        } else if (val === 4) {
          return '已驳回'
        }
        return ''
      },
      // 时间格式化
      timeformat(row, column) {
        const startTime = parseTime(row.startDt, '{y}:{m}:{d} {h}:{i}:{s}')
        const endTime = parseTime(row.endDt, '{y}:{m}:{d} {h}:{i}:{s}')
        return `${startTime}至${endTime}`
      },
      // 查询客户信息
      async searchCms() {
        const verify = this.verifyLfetQueryParams()
        if (!verify) return

        if (!this.isClickLeftSelect) {
          this.$message.error('请根据条件查询客户')
          return
        }
        if (!this.csmInfo.text) {
          if (this.csmInfo.type === 'csmRgPhone') {
            this.$message.error('电话号码不能为空')
            return
          }
          if (this.csmInfo.type === 'csmCode') {
            this.$message.error('客户编号不能为空')
            return
          }
          if (this.csmInfo.type === 'sfzh') {
            this.$message.error('身份证号不能为空')
            return
          }
        }
        var phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        var csmCodeReg = /^\d{1,}$/
        var sfzhReg = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
        if (this.csmInfo.type === 'csmRgPhone' && !phoneReg.test(this.csmInfo.text)) {
          this.$message.error('电话号码格式错误，请重新输入')
          return
        } else if (this.csmInfo.type === 'csmCode' && !csmCodeReg.test(this.csmInfo.text)) {
          this.$message.error('客户编号输入错误，请重新输入')
          return
        } else if (this.csmInfo.type === 'sfzh' && !sfzhReg.test(this.csmInfo.text)) {
          this.$message.error('身份证号输入错误，请重新输入')
          return
        }
        try {
          const params = {
            csmStatus: 9 // 查询状态不是已注销的客户
          }
          params[this.csmInfo.type] = this.csmInfo.text
          const res = await CmsSpecialSearchCsmInfo(params)
          if (res.data) {
            if (res.data.csmStatus === 1) {
              this.$message.error('当前客户未审核')
              return
            }

            if (res.data.csmStatus === 3) {
              this.$message.error('当前客户已挂失')
              return
            }

            this.csmInfo = { ...res.data, text: this.csmInfo.text, type: 'sfzh' }
            if (res.data.phoneItems && res.data.phoneItems.length > 0) this.csmInfo.phoneItems = res.data.phoneItems.filter(item => item.cpStatus === 2)
            if (res.data.phoneItems && res.data.phoneItems.length > 1) this.$set(this.csmInfo, 'csmRgPhone', '')
            if (res.data.addressItems && res.data.addressItems.length > 1) this.$set(this.csmInfo, 'csmRgAddress', '')
          } else {
            this.$message.error('未获取到客户信息')
          }
        } catch (e) {
          console.log(e)
        }
      },
      // 添加客户（本地）
      addUser() {
        var exists = false // 添加的规格在表格中是否已存在
        var csmCode = this.csmInfo.csmCode
        for (var i = 0; i < this.tableDataRight.data.length; i++) {
          if (csmCode === this.tableDataRight.data[i].csmCode) {
            exists = true
          }
        }
        if (!exists) {
          var data = {}
          data.isChecked = false // 未选中
          data.csmCode = this.csmInfo.csmCode // 客户编号
          data.csmName = this.csmInfo.csmName // 客户名称
          if (!this.csmInfo.csmCode) {
            this.$message.error('请查询客户')
            return
          }
          data.csmType = this.csmInfo.csmType // 客户类型
          data.orgSNNo = this.csmInfo.orgSNNo
          data.contact = this.csmInfo.contact
          data.csmId = this.csmInfo.csmId
          data.csmRgPhone = this.csmInfo.csmRgPhone
          data.csmOrg = this.csmInfo.nearStationName // 所属机构
          data.csmRgAddress = this.csmInfo.csmRgAddress // 地址
        } else {
          this.$message.error('当前用户已存在,不可重复添加')
          return
        }
        this.tableDataRight.data.push({ ...data })
        this.$refs.tableData_right.toggleRowSelection(this.tableDataRight.data[this.tableDataRight.data.length - 1])
      },
      // 勾选客户列表
      selectRightTable(val) {
        const totalNumber = val.length
        if (val.length > 0) {
          let text = '已选中' + totalNumber + '个客户'
          for (const key in this.customTypeBean) {
            const obj = this.customTypeBean[key]
            const match = val.filter(item => item.csmType === obj.name.value)
            obj.number = match.length
            text = text + '，' + obj.number + '个' + obj.name.desc
          }
          this.tip2 = text
        } else {
          let text = '已选中' + totalNumber + '个客户'
          for (const key in this.customTypeBean) {
            const obj = this.customTypeBean[key]
            obj.number = 0
            text = text + '，' + obj.number + '个' + obj.name.desc
          }
          this.tip2 = text
        }
      },
      // 删除客户（本地）
      delCms(row, index) {
        this.tableDataRight.data.splice(index, 1)
      },
      // 删除商品
      delShop(row) {
        const vm = this
        this.$confirm(`确定要删除吗？`, '提示', {
          type: 'info'
        }).then(() => {
          var params = {
            categoryDetailId: row.categoryDetailId,
            csmId: row.csmId,
            priceCgId: row.priceCgId
          }
          try {
            CmsSpecialDeleteGoods(params).then((data) => {
              vm.fetchDataLeft({})
            })
          } catch (e) {
            console.log(e)
          }
        })
      },
      open(params) {
        this.tip1 = ''
        this.tip2 = ''
        this.visible = true
        if (this.goodsTreeData.length > 0) {
          this.shop.gtId = this.goodsTreeData[0].gtId
          this.selectTreeChange(this.goodsTreeData[0])
        }
      },
      async success() {
        var paramData = {}
        // 校验商品分类
        if (!this.shop.gtId) {
          this.$message.error('请选择商品分类')
          return
        } else {
          paramData.gtId = this.shop.gtId
          paramData.gtName = this.goodsTreeData.find(
            (l) => l.gtId === this.shop.gtId
          ).gtName
        }

        // 校验商品名称
        if (!this.shop.goodsId) {
          this.$message.error('请选择商品名称')
          return
        } else {
          paramData.goodsId = this.shop.goodsId
          paramData.goodsName = this.goodsTypesDetailList.find(
            (l) => l.goodsId === this.shop.goodsId
          ).goodsName
        }

        // 校验波动方式
        if (!this.shop.priceType) {
          this.$message.error('请选择波动方式')
          return
        } else {
          paramData.priceType = this.shop.priceType
        }

        // 校验价格
        var price = this.shop.price
        if (!price) {
          this.$message.error('请输入波动价格')
          return
        } else {
          var reg = /^-?\d+(,\d{3})*(\.\d{1,2})?$/
          if (reg.test(price) && price > 0) {
            paramData.price = price
          } else {
            this.$message.error('波动价格输入有误，请重新输入')
            return
          }
        }

        // 客户列表数据
        var customerInfoList = []
        var rows = this.tableDataRight.data
        if (!rows.length) {
          this.$message.error('请添加客户')
          return
        } else {
          for (var x = 0; x < rows.length; x++) {
            var row = rows[x]
            var customInfo = {
              csmCode: row.csmCode,
              csmPhone: row.csmRgPhone,
              csmAddress: row.csmRgAddress
            }
            customerInfoList.push(customInfo)
          }
          paramData.customerInfoList = customerInfoList
        }

        // 校验时间
        if (!this.submit.date.length) {
          this.$message.error('请选择生效时间')
          return
        }
        paramData.startDt = this.submit.date[0]
        paramData.endDt = this.submit.date[1]

        // 校验生效机构
        var selectedOrg = this.selectOrgValue
        if (selectedOrg.orgName) {
          paramData.orgId = selectedOrg.orgId
          paramData.orgName = selectedOrg.orgName
          paramData.orgSNNo = selectedOrg.orgSNNo
        } else {
          this.$message.error('请选择生效机构')
          return
        }
        // infoList
        const params = {
          detail: paramData,
          infoList: this.tableDataRight.data
        }
        const res = await CmsSpecialconfigSave(params)
        if (res.success) {
          this.$message.success('提交成功')
          this.visible = false
          // 更新数据
          this.$emit('upDataTable')
        }
      },
      // 查询枚举
      async queryOptionsMap() {
        const res = await mergeAsyncFunc(queryMap, { enumName: 'CustomerType' })
        this.customerTypeMap = res.data // 客户类型
      },
      // 收缩右边
      toggleFold() {
        this.fold = !this.fold
      },
      reset() {
        this.shop = {}
        this.csmInfo = {
          text: '',
          type: 'sfzh',
          phoneItems: [],
          addressItems: []
        }
        this.submit = {
          date: [],
          orgSNNo: null
        }
        this.tip1 = ''
        this.tip2 = ''
        this.tableDataRight.data = []
        this.tableDataLeft.data = []
      }
    }
  }
</script>

<style lang="scss" scoped>
.form1 {
  & /deep/ .el-form-item {
    margin-right: 0;
  }
}
.form {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 33.3%;
    height: 20px;
    margin-right: 0;
    margin-bottom: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
.form_right {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 40%;
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
.info-title {
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  .title-wrapper {
    display: flex;
    align-items: center;
  }
  .title-icon {
    display: inline-block;
    width: 4px;
    height: 14px;
    margin-right: 6px;
    background: $themeColor;
  }
  span {
    font-weight: 700;
    color: $themeColor;
  }
}
.flex {
  justify-content: space-between;
}
.page_main {
  display: flex;
  box-sizing: border-box;
  .left {
    width: 50%;
    padding: 5px;
    // border: 1px solid #ebeff6;
  }
  .width100 {
    width: 99%;
  }
  .fold-div {
    i {
      cursor: pointer;
    }
  }
  .right {
    width: 50%;
    padding: 5px;
  }
  .info {
    display: inline-block;
    overflow: hidden;
    font-size: 14px;
    color: #999;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .border {
    padding: 10px 5px;
    border: 1px solid #ebeff6;
  }
  p {
    padding: 0;
  }
}
</style>
